<script setup>
import {reactive, ref} from "vue";
import xx from "@/axios/xx";
import {ElMessage, ElMessageBox} from "element-plus";

const info = reactive({
  list:[],//列表数据
  form:{},//表单数据
  dialogVisible:false, //对话框数据
  total:null,//总条数
  pageNum:null,//当前页
  pageSize:null,//当前页数据容量
  isAdd:true//增加和修改选项标识
})

//查询产品类型信息
const load = () => {
  xx.get("/loanProductType",{
    params: {
      pageNum:info.pageNum,
      pageSize:info.pageSize,
      producTypeName:info.form.loanTypeName
    }
  }).then(res =>{
    console.log(res);
    info.list = res.data.list;
    //当前页
    info.pageNum = res.data.pageNum;
    //每页大小
    info.pageSize = res.data.pageSize;
    //总条数
    info.total = res.data.total;
  })
}//查询产品类型信息
load()

//分页当前页改变
const handleCurrentChange = (pageNum) => {
  //pageNum是前端网页所选择的当前页
  //传递数据给info.pageSize
  info.pageNum = pageNum;
  // 执行加载函数，加载函数会把info.pageNum数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页当前页改变
//分页每页数据大小改变
const handleSizeChange = (pageSize) => {
  //pageSize是前端所选择的每页大小
  //传递数据给info.pageSize
  info.pageSize = pageSize;
  // 执行加载函数，加载函数会把info.pageSize数据发送给后端，
  // 后端在根据接收到的当前页和每页数据大小返回数据给前端，
  // 前端再用info.pageNum和info.pageSize接收数据
  load();
}//分页每页数据大小改变
 /**
//产品类型名称查询,自己编写
// const queryLoanTypeName = () => {
//   xx.get("/loanProductType",{
//     params: {
//       producTypeName:info.form.loanTypeName
//     }
//   }).then(res => {
//     info.list = res.data.list;
//      这里再调用自身会递归，逻辑错误。
//     queryLoanTypeName();
//   })
// }
  */

//删除数据
 const handleDelete = (loanTypeId) => {
   ElMessageBox.confirm(
       '确定删除该条产品类型信息?',
       '警告',
       {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }
   )
       .then(() => {
         xx.delete("/loanProductType/"+loanTypeId).then(res => {
           console.log(res);
           if(res.code ==200){
             ElMessage({
               type: 'success',
               message: res.message,
             })
             load();
           } else {
             ElMessage.error(res.message)
           }
         })
       })
       .catch(() => {
         ElMessage({
           type: 'info',
           message: '取消删除',
         })
       })
 }
//关闭对话框清除数据
const handleClose = () => {
  info.form = {};
  info.dialogVisible = false;
}
//持久化数据
const persistence = () => {
  xx({
    url:"/loanProductType",
    method:info.isAdd?"post":"put",
    data:info.form
  }).then(res => {
    if (res.code == 200){
      ElMessage({
        type: 'success',
        message: res.message,
      })
    } else {
      ElMessage.error(res.message)
    }
    //关闭对话框
    info.dialogVisible = false;
    //清空数据
    info.form = {}
    //重新加载
    load()
  })

}
//增加按钮表单显示方法
const add = () => {
  info.dialogVisible = true;
  info.isAdd = true
}
//编辑数据
const handleEdit = (loanTypeId) => {
  info.isAdd = false;
  xx.get("/loanProductType/"+loanTypeId).then(res => {
    info.form = res.data;
  })
  info.dialogVisible = true;
}

</script>

<template>
  <!--  新增类型按钮-->
  <el-button color="#5055be" type="success" @click="add">新增类型</el-button>
  <br>
  <br>
  <!--  产品类型搜索表单-->
  <el-form :inline="true" :model="info.form" class="demo-form-inline">
    <el-form-item label="产品类型">
      <el-input v-model="info.form.loanTypeName" placeholder="类型名称" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load">查询</el-button>
    </el-form-item>
  </el-form>
  <!--  产品类型表格信息-->
  <el-table :data="info.list" border stripe style="width: 100%">
    <el-table-column type="index" align="center" label="序号" width="180" />
    <el-table-column prop="loanTypeName" align="center" label="产品类型" width="180" />
    <el-table-column prop="description" align="center" label="描述信息" />
    <el-table-column label="操作" align="center" width="220" >
      <template #default="scope">
        <el-button size="default" type="primary" @click="handleEdit(scope.row.loanTypeId)">编辑</el-button>
        <el-button size="default" type="danger" @click="handleDelete(scope.row.loanTypeId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br>
  <!--  分页条-->
  <div class="pagination-wrapper">
    <el-pagination
        id="pagination"
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5,10,15,20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--  dialog对话框窗口-->
  <el-dialog v-model="info.dialogVisible" :title="info.isAdd?'增加产品类型信息':'修改产品类型信息'" :before-close="handleClose" width="45%">
  <!--  产品类型信息填写表单-->
    <el-form :model="info.form" label-width="auto" style="max-width: 450px; margin-left: 80px">
      <el-form-item label="产品类型" >
        <el-input v-model="info.form.loanTypeName"  style="height: 38px;width: 400px"/>
      </el-form-item>
      <el-form-item label="描述信息" >
        <el-input v-model="info.form.description" type="textarea" />
      </el-form-item>
    </el-form>
  <!--  对话框底部按钮设置-->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="persistence">保存信息</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
/*pagination分页组件居中显示*/
#pagination{
  justify-content: center;
}


</style>